<template>
	<view class="pageBox">
		<view class="topTipBox">
			<view class="title">用车说明</view>
			<view class="text">请提前24小时发起用车申请，临时用车请在提交申请后联系人才专线：15067880882（周一至周日8:30-12:00，14:00-21:00）</view>
		</view>
		<view class="gapBox"></view>
		<view class="formBox">
			<u--form labelPosition="left" :model="formData" labelWidth="160rpx" :rules="rules" ref="uForm">
				<view class="formItemBox">
					<u-form-item label="用车时间" prop="vehicleDate" borderBottom>
						<view @click="openTime('timeShow','vehicleDate')">
							<view class="placeholderText" v-if="!formData.vehicleDate">请选择用车时间</view>
							<view class="inputView" v-else>
								{{setWeek(formData.vehicleDate)}}
							</view>
						</view>
					</u-form-item>
					<u-form-item label="用车时段" prop="vehicleTimeStart">
						<view class="startEndTimeBox" @click="openTime1">
							<view class="inputView timeStart">
								{{formData.vehicleTimeStart}}-
								{{formData.vehicleTimeEnd}}
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="gapBox"></view>
				<view class="formItemBox">
					<u-form-item label="起点" prop="startingPoint" borderBottom>
						<u--input v-model="formData.startingPoint" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="终点" prop="endPoint">
						<u--input v-model="formData.endPoint" border="none" placeholder="请输入"></u--input>
					</u-form-item>
				</view>
				<view class="gapBox"></view>
				<view class="formItemBox">
					<u-form-item label="备注" prop="remark">
						<u--textarea v-model="formData.remark" placeholderClass="plText" placeholder="请输入备注" autoHeight
							border="none"></u--textarea>
					</u-form-item>
				</view>
			</u--form>
			<view class="btnBox">
				<view class="btn" @click="submit">提交</view>
			</view>
			<u-datetime-picker :minDate="-4607395543000" ref="datetimePicker" title="用车时间" :show="timeShow"
				v-model="time" mode="date" :formatter="formatter" @confirm="confirmPicker($event,'timeShow')"
				@cancel="closePicker('timeShow')" @close="closePicker('timeShow1')"></u-datetime-picker>
			<timeSlot ref="timeslot" title="用车时段" @confirm="confirmTime">
			</timeSlot>
		</view>
		<view class="gapBox"></view>
	</view>
</template>

<script>
	import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
	import * as catApi from "@/api/serve/cat.js"
	import {
		formatTime
	} from "@/utils/util.js"
	export default {
		components: {
			timeSlot
		},
		data() {
			return {
				datetimesingle: '',
				carTime: '',
				startTime: '',
				endTime: '',
				timeShow: false,
				timeShow1: false,
				timeShow2: false,
				time: Number(new Date()),
				time1: '',
				time2: '',
				timeName: '',
				formData: {
					vehicleDate: '',
					vehicleTimeStart: '',
					vehicleTimeEnd: '',
					remark: '',
					startingPoint: '',
					endPoint: '',
					vehicleTime: '',
				},
				rules: {
					'vehicleDate': {
						type: 'number',
						required: true,
						message: '请选择用车时间',
						trigger: ['change']
					},
					'vehicleTimeStart': {
						type: 'string',
						required: true,
						message: '请选择用车时段',
						trigger: ['change']
					},
					'startingPoint': {
						type: 'string',
						required: true,
						message: '请输入起点',
						trigger: ['blur', 'change']
					},
					'endPoint': {
						type: 'string',
						required: true,
						message: '请输入终点',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onReady() {
			// 微信小程序需要用此写法
			// #ifdef MP
			this.$refs.datetimePicker.setFormatter(this.formatter)
			// #endif
		},
		methods: {
			submit() {
				const that = this
				const formData = JSON.parse(JSON.stringify(this.formData))
				formData.vehicleDate = formatTime(formData.vehicleDate, "-").time1
				this.$refs.uForm.validate().then(res => {
					uni.$u.throttle(
						catApi.addcat(formData).then(res => {
							that.$toast1("提交成功", setTimeout(() => {
								that.$navTo(
									'pages/my/serve/rideHailing/rideHailingList/rideHailingList', {},
									'redirectTo')
							}, 600))
						}), 500)
				})
			},
			confirmTime(value) {
				this.formData.vehicleTimeStart = `${value.start.hour}:${value.start.min}`
				this.formData.vehicleTimeEnd = `${value.end.hour}:${value.end.min}`
				this.formData.vehicleTime = `${value.start.hour}:${value.start.min}-${value.end.hour}:${value.end.min}`
			},
			openTime1() {
				this.$refs.timeslot.open()
			},
			maxTimeNum(time1, time2) {
				const startTime = time1.split(':')
				const endTime = time2.split(':')
				return
			},
			timeNum(str) {
				return str.split(':')
			},
			confirmPicker({
				value,
				mode
			}, showName) {
				const timeName = this.timeName
				this.formData[timeName] = value
				this[showName] = false
			},
			closePicker(show) {
				this[show] = false
				this.timeName = ''
			},
			openTime(show, timeName) {
				this[show] = true
				this.timeName = timeName
			},
			closeTime(show, timeName) {
				this[show] = false
				this.timeName = ''
			},
			setWeek(value) {
				if (value) {
					const dateTime = formatTime(new Date(value))
					return `${dateTime.year}年${dateTime.month}月${dateTime.day}日 ${dateTime.week1}`
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/my/server.scss";
</style>